import { SetStateAction, useState } from 'react' // react属性
import './index.css' // 页面样式
import { NavBar, TextArea, Toast } from 'antd-mobile' // 组件引入
import { useNavigate } from 'react-router-dom' // 路由
import { getQrUrl } from '@/api/index' // 获取二维码图标

function MyQrcode() {

  /* 路由 */
  const navigate = useNavigate();

  /* 声明变量 */
  const [qrValue, setQrValue] = useState<string>('') // qrcode内容
  const [qrImg, setQrImg] = useState<string>('') // qrcode图片


  /* 事件函数 */
  const onSubmit = () => {
    if (qrValue === '') return Toast.show({
      icon: 'fail',
      content: '内容不能为空',
    })
    getQrUrl({ text: qrValue }).then(res => {
      setQrImg(res.data)
    })
  }


  return (
    <>
      <div className="qrcode-container">
        <NavBar style={{ backgroundColor: "#fff" }} onBack={() => navigate(-1)}>二维码生成</NavBar>
        <div className='qrcode-content'>
          <div dangerouslySetInnerHTML={{ __html: qrImg }} />
        </div>
        <div className='qrcode-btn'>
          <TextArea
            placeholder='请输入要转为二维码的内容'
            style={{ backgroundColor: "#fafafa", padding: '.2rem', boxSizing: 'border-box', borderRadius: '.1rem' }}
            rows={6}
            value={qrValue}
            onChange={(val: SetStateAction<string>) => {
              setQrValue(val)
            }}
          />
          <p onClick={onSubmit} style={{ marginTop: ".4rem" }} color='success'>生成二维码</p>
        </div>
      </div>
    </>
  );
}

export default MyQrcode;